<template>
  <basic-layout>
    <page-header />
    <view class="stationInfo">
      <div class="contert_center">

        <div class="lBtn" :style="{ visibility: queryParams.params.pageNum > 1 ? 'visible' : 'hidden' }">
          <div class="lBtn_img" @click="prevPage">
            <image src="/static/images/stationInfo/arrow_left@2x.png" alt="" mode="widthFix"></image>
          </div>
        </div>

        <div class="btns">
          <div class="btns_item" v-for="item in columnList" :key="item.id" @click="itemsClick(item)">
            <div class="items_logo">
              <image :src="item.icon ? baseUrl + item.icon : defaultLogo" alt="" mode="widthFix"></image>
            </div>
            <div class="item_title">{{ item.title }}</div>
          </div>
        </div>

        <div class="rBtn" :style="{ visibility: queryParams.params.pageNum < maxPage ? 'visible' : 'hidden' }">
          <div class="lBtn_img" @click="nextPage">
            <image src="/static/images/stationInfo/arrow_right@2x.png" alt="" mode="widthFix"></image>
          </div>
        </div>

      </div>
    </view>
  </basic-layout>
</template>

<script>
import BasicLayout from '@/components/layout/basic-layout.vue'
import { getColumnListByTabId, getArticleListByColumnId } from "@/api/index"
import { baseUrl } from '../../config'
import config from '@/config.js'

export default {
  components: {
    BasicLayout
  },
  data() {
    return {
      tabId: '', // 存储选中的tab id
      columnList: [],
      queryParams: {
        tabbarId: '',
        params: {
          pageNum: 1,
          pageSize: 8,
        }
      },
      total: 0,
      baseUrl: '',
      defaultLogo: "/static/images/stationInfo/icon4@2x.png",
    }
  },

  mounted() {
    uni.$on('tabSelected', this.onTabSelected)
    let savedTabId = this.$store.getters['tab/tabId']
    if (!savedTabId) {
      // 如果 Vuex 里没有，尝试从本地恢复
      savedTabId = uni.getStorageSync('tabId')
      if (savedTabId) {
        this.$store.dispatch('tab/setTabId', savedTabId)
      }
    }
    if (savedTabId) {
      this.tabId = savedTabId
      this.getColumnListBy(savedTabId)
    }

    this.baseUrl = config.baseUrl

  },
  computed: {
    maxPage() {
      return Math.ceil(this.total / this.queryParams.params.pageSize) || 1
    }
  },
  methods: {

    getColumnListBy(tabId) {
      this.queryParams.tabbarId = tabId;
      this.columnList = [];
      getColumnListByTabId({
        tabbarId: tabId,
        pageSize: this.queryParams.params.pageSize,
        pageNum: this.queryParams.params.pageNum
      }).then(res => {
        this.columnList = res.rows || []
        this.total = res.total || 0 // 记录总条数
      }).catch(err => {
        console.error('获取文章列表失败:', err);
      });
    },

    itemsClick(item) {
      getArticleListByColumnId({ columId: item.id }).then(res => {
        if (res.code == 200) {
          if (res.rows && res.rows.length > 0) {
            // 在URL中添加更多参数
            const url = `/pages/articleList/index?columnId=${item.id}`;
            console.log('准备跳转到:', url);

            uni.navigateTo({
              url: url,
              success: () => {
                console.log('跳转成功，传递的参数:', item);
              },
              fail: (err) => {
                console.error('跳转失败:', err);
              }
            });
          } else {
            uni.showToast({
              title: '暂无文章',
              icon: 'error',
              duration: 2000
            });
          }
        }
      });
    },

    prevPage() {
      // console.log(1);

      if (this.queryParams.params.pageNum > 1) {
        this.$nextTick(() => {
          this.queryParams.params.pageNum--
          this.getColumnListBy(this.tabId)
        })
      }
    },
    nextPage() {
      // console.log(2);

      if (this.queryParams.params.pageNum < this.maxPage) {
        this.$nextTick(() => {
          this.queryParams.params.pageNum++
          this.getColumnListBy(this.tabId)
        })
      }
    },

    // 处理tab选中事件
    onTabSelected(data) {
      if (!data || !data.id) return;

      this.tabId = data.id
      this.$store.dispatch('tab/setTabId', data.id)
      uni.setStorageSync('tabId', data.id)
      this.queryParams.params.pageNum = 1
      this.getColumnListBy(data.id)
    },
  }
}
</script>

<style lang="scss" scoped>
.stationInfo {
  width: 100%;
  height: 100%;
  color: #fff;

  .contert_center {
    width: 100%;
    height: 100%;
    // background-color: #fff;
    padding: calc(100vw * 110 / 2560) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;


    .lBtn,
    .rBtn {
      width: calc(100vw * 384 / 2560);
      height: calc(100vw * 940 / 2560);
      // background-color: #8b4fc4;
      display: flex;
      justify-content: center;
      align-items: center;

      .lBtn_img {
        width: calc(100vw * 120 / 2560);
        height: calc(100vw * 180 / 2560);

        image {
          width: 100%;
          height: 100%;

        }
      }
    }

    .btns {
      width: calc(100vw * 2480 / 2560);
      height: calc(100vw * 940 / 2560);
      // background-color: #a14c4c;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start; // 让内容靠上
      justify-content: flex-start; // 让内容靠左
      gap: 0 calc(100vw * 88 / 2560); // 列间距
      overflow: hidden;

      .btns_item {
        width: calc(100vw * 400 / 2560);
        height: calc(100vw * 440 / 2560);
        background: url("@/static/images/stationInfo/bg@2x.png") no-repeat center center;
        background-size: cover;
        margin-bottom: calc(100vw * 60 / 2560);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: calc(100vw * 40 / 2560);

        .items_logo {
          width: calc(100vw * 186 / 2560);
          height: calc(100vw * 186 / 2560);
          margin-bottom: calc(100vw * 20 / 2560);

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>